﻿// JavaScript Document
var canvasWidth=
Math.min(800,window.screen.width-20)	<!--宽减20，最少800-->
var canvasHeight=canvasWidth
var canvas=
document.getElementById("canvas")
canvas.width=canvasWidth
canvas.height=canvasHeight
var isMouseDown=false;				<!--判断鼠标是否移下去-->
var LastLoc={x:0,y:0}
var curTimestamp=0;
var context=canvas.getContext("2d")   <!--得到canvas环境,2d为平面-->
drawGird()
function windowToCanvas(x,y)
{
	var bbox=
	canvas.getBoundingClientRect();
	return{x:Math.round(x-bbox.left), <!--给转换结果取整-->
			y:Math.round(y-bbox.top)}	
}
canvas.onmousedown=function(e)		<!--鼠标按下去的e事件-->
{		
		isMouseDown=true;
		LastLoc=
		windowToCanvas(e.clientX,
						e.clientY)
		LastTimestamp=
		new Date().getTime	
}
canvas.onmouseup=function(e)	
{
		isMouseDown=false;
}
canvas.onmousemove=function(e)
{	
		if(isMouseDown)
		{
			//画线
			var curLoc=
			windowToCanvas(e.clientX,
							e.clientY)
			var curTimestamp=
			new Date().getTime();
			var t=
			curTimestamp-LastTimestamp
			var s=
			calcDistance(LastLoc,curLoc)
			var myLineWidth=
			calcLineWidth(t,s)
			console.log("lw:"+myLineWidth);
			context.beginPath();
			context.moveTo(LastLoc.x,
							LastLoc.y)
			context.lineTo(curLoc.x,
						curLoc.y)
			context.lineWidth=myLineWidth
			context.lineCap="round"
			context.strokeStyle="black"
			context.stroke()
			LastLoc=curLoc;
			LastTimestamp=curTimestamp;
	
		}
}
function calcLineWidth(t,s)
{
		var v=s/t
		console.log("s="+s+"t="+t+"v="+v)
		var resultLineWidth
		if(v<=0.1)
		{
			resultLineWidth=30
		}
		else if(v>10)
		{
			resultLineWidth=1
		}
		else
		{
			resultLineWidth=	
			(30-1)*(10-(v-0.1))/(10-0.1);
		}
			return resultLineWidth;
}
function calcDistance(loc1,loc2)
{
		return Math.sqrt((loc1.x-loc2.x)*(loc1.x-loc2.x)+(loc1.y-loc2.y)*(loc1.y-loc2.y))
}
function drawGird()
{
context.save();						<!--原来上下文的内容要保存-->
context.strokeStyle="rgb(230,11,9）"   <!--画笔类型，画线颜色-->
context.beginPath();                  <!--开始画框-->
context.moveTo(3,3);					<!--起始点-->
context.lineTo(canvasWidth-3,3);
context.lineTo(canvasWidth-3,canvasHeight-3)
context.lineTo(3,canvasHeight-3)

context.closePath();
context.lineWidth=6
context.stroke()

context.beginPath()						<!--画对角线-->
context.moveTo(0,0)
context.lineTo(canvasWidth,canvasHeight)

context.moveTo(canvasWidth/2,0)			<!--垂直平方线-->
context.lineTo(canvasWidth/2,canvasHeight)

context.moveTo(canvasWidth,0)
context.lineTo(0,canvasHeight)

context.moveTo(0,canvasHeight/2)
context.lineTo(canvasWidth,canvasHeight/2)

context.lineWidth=1
context.stroke()
context.restore();						<!--画之后恢复-->
}
//手机版
//touchstart touchmove touchend
canvas.addEventListener('touchstart',function(e){		<!--接听事件，鼠标按上去了-->
		isMouseDown=true;												<!--console.log("touchstart")	接听完之后调用的函数，捕获事件-->
		var touch=e.touches[0]								<!--第一个触电-->
		LastLoc=
		windowToCanvas(touch.pageX,
						touch.pageY)
		LastTimestamp=
		new Date().getTime()
	}
)
canvas.addEventListener('touchmove',function(e){		<!--鼠标移动-->
		if(isMouseDown)
		{
			//画线
			var touch=e.touches[0]
			var curLoc=
			windowToCanvas(touch.pageX,
   						   touch.pageY)
			var curTimestamp=
			new Date().getTime()
			var t=curTimestamp-
				  curTimestamp
			var s=
			calcDistance(LastLoc,curLoc)
			var myLineWidth=
			calcLineWidth(t,s)
			context.beginPath()
			context.moveTo(LastLoc.x,
							LastLoc.y)
			context.lineTo(curLoc.x,
						   curLoc.y)
			context.lineWidth=
					myLineWidth
			console.log(myLineWidth)
			context.lineCap="round"
			context.stroke()
			LastLoc=curLoc
			LastTimestamp=curTimestamp
		}
}
)
canvas.addEventListener('touchend',function(e){
			isMouseDown=false;

}
)